<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="父级课程:">
            <el-select v-model="parms.courseClassParentId" placeholder="请选择" clearable style="width: 200px" size="mini" :disabled="true">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程大类:">
            <el-select v-model="parms.courseClass" placeholder="请选择" clearable style="width: 200px" size="mini" :disabled="true">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型:">
            <el-select v-model="parms.courseType" placeholder="请选择" clearable style="width: 200px" size="mini">
              <el-option :value="2" label="章节"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="名称:">
            <el-input v-model="parms.courseName" clearable style="width: 200px" size="mini" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="章节数:">
            <el-input v-model="parms.courseChapter" type="number" clearable style="width: 200px" size="mini" :disabled='true'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总时长:">
           <el-time-picker
              v-model="parms.courseDuration" placeholder="请输入时间" size="mini" style="width: 200px" value-format="HH:mm:ss">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="强度:">
            <el-select v-model="parms.strengthGrade" placeholder="请选择" clearable style="width: 200px" size="mini">
              <el-option :value="1" label="低"/>
              <el-option :value="2" label="中"/>
              <el-option :value="3" label="高"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="水平:">
           <el-select v-model="parms.courseLevel" placeholder="请选择" clearable style="width: 200px" size="mini">
              <el-option :value="1" label="初级"/>
              <el-option :value="2" label="中级"/>
              <el-option :value="3" label="高级"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权重:">
           <el-select v-model="parms.code" placeholder="请选择" clearable style="width: 200px" size="mini">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="上传视频:">
            <Upvideo @upVideo="upVideo" :type="2" :showLod="true"></Upvideo> 
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原视频:">
            <video :src="parms.courseVideo" class="avatar video-avatar" controls="controls" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="章节简介:">
        <el-input v-model="parms.courseDetail" clearable type="textarea" style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="详细介绍:">
        <el-input v-model="parms.courseDetailDescription" clearable type="textarea" style="width: 95%" rows="5"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="add">修改</el-button>
      <!-- <el-button type="warning" size="mini">暂存</el-button> -->
      <el-button size="mini" @click="handCancle">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getEdi, update } from '@/api/course/standard'
import { getList } from '@/api/course/index'
import { option } from "@/api/action/action"
import Upvideo from './update.vue'
export default {
  components: {
    Upvideo
  },
  props: ['id', 'showDialog', 'courobj'],
  data() {
    return {
      form: {
        name: ''
      },
      value: '',
      options: [],
      options1: [],
      options2:[],
      parms: {},
      obj: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    upVideo(e) {
      if(e.type == 'editor') {
        this.parms.courseVideo = e.val
      }
    },
    getList() {
      this.parms = this.courobj
      this.parms.code = Number(this.parms.code)
      if(this.parms.code === 0){
          this.parms.code = null
        }
     // console.log(this.parms)
      getList().then(res => {
        let arr = res.rows
        let arr1 = []
        for(let i=0;i<arr.length;i++){
          arr1.push({'value': arr[i].id, 'label': arr[i].courseClassName})
        }
        this.options = arr1
      })
      option().then(res => {
        let arr = res;
        let arr1 = [];
        for (let i = 0; i < arr.length; i++) {
          arr1.push({ value: arr[i].id, label: arr[i].name });
        }
        this.options2 = arr1;
      });
      getEdi(this.id).then(res => {
     //   this.parms = res.data
        this.parms.courseType = 2
        // this.parms.courseDetailDescription = ''
        // this.parms.courseDetail = '',
       // this.parms.courseVideo = '1213'
        let id = this.parms.courseClassParentId
        if(id != 0){
          getList(this.parms.pageNum,this.parms.pageSize,id).then(res => {
            let arr = res.rows
            let arr1 = []
            for(let i=0;i<arr.length;i++){
              arr1.push({'value': arr[i].id, 'label': arr[i].courseClassName})
            }
            this.options1 = arr1
          })
        }
      })
    },
    add() {
     // this.$set(this.parms,'id',this.id)
    //  this.parms.courseParentId = this.id
    //  this.$delete(this.parms,'id')
      if(this.parms.courseVideo == null || this.parms.courseVideo == '') {
        this.$message.error('请上传视频')
        return
      }
      update(this.parms).then(res => {
        if(res.code === 200) {
          this.$message.success('修改成功')
          this.handCancle()
        }
      })
    },
    handCancle() {
      this.$emit('handCancle', 1)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  },
  watch: {
    showDialog: function(n, o) {
      if (n) {
        this.getList()
        this.parms = this.courobj
      }
    }
  }
}
</script>

<style scoped>
.flex{
  display: flex;
  justify-content: space-between;
}
.el-table th.gutter {
  display: table-cell !important
}
.dialog-footer{
  text-align: center;
}
</style>
